<template>
  <div class="container" :class="{ 'set-height': issm }">
    <view class="container-box">
      <!-- 头部部分 -->
      <div class="header-info">
        <div class="individual-info" @click="topersonalinfo">
          <image class="album" :src="userImg" />
          <div>
            <div class="monicker">
              <span>{{ userName }}</span>
              <div class="yrzbox" v-if="issm">
                <img class="img" src="../../static/yrz.png" alt="" />
                已实名认证
              </div>
            </div>
            <div class="handset align-flex">
              <image class="telephone-img" src="/static/express-center/telephone.png" />
              {{ userPhone || "暂无" }}
            </div>
          </div>
        </div>
        <image class="borderism" src="/static/express-center/inform.png" @click="tomessage" />
      </div>
      <!-- 底部快捷中心部分 -->
      <div class="celerity-kernel">
        <div class="celerity-headline">快捷中心</div>
        <div class="celerity-row-new">
          <!-- :style="{ width: width || '100%', height: height || 'auto' }" -->
          <div class="celerity-label" :style="{ 'text-align': item.position }" v-for="(item, index) in envelopelist"
            :key="index" @click="toGo(item.href)">
            <div class="celerity-label-box">
              <image class="celerity-label-img" :src="item.src" />
              <div class="celerity-remarks">
                {{ item.caption }}
              </div>
            </div>
          </div>
        </div>
        <!-- <div class="celerity-row">
                    <div class="celerity-label" :style="{ 'text-align': item.position }" v-for="(item, index) in envelope1"
                        :key="index" @click="toGo(item.href)">
                        <div class="celerity-label-box">
                            <image class="celerity-label-img" :src="item.src" />
                            <div class="celerity-remarks">{{ item.caption }}</div>
                        </div>
                    </div>
                </div>
                <div class="celerity-row">
                    <div class="celerity-label" :style="{ 'text-align': item.position }" v-for="(item, index) in envelope2"
                        :key="index" @click="toGo(item.href)">
                        <div class="celerity-label-box">
                            <image class="celerity-label-img" :src="item.src" />
                            <div class="celerity-remarks">{{ item.caption }}</div>
                        </div>
                    </div>
                </div>
                <div class="celerity-row">
                    <div class="celerity-label" :style="{ 'text-align': item.position }" v-for="(item, index) in envelope3"
                        :key="index" @click="toGo(item.href)">
                        <div class="celerity-label-box">
                            <image class="celerity-label-img" :src="item.src" />
                            <div class="celerity-remarks">{{ item.caption }}</div>
                        </div>
                    </div>
                </div> -->
      </div>
      <!-- 中间图片 -->
      <div class="middle-section align-flex">
        <div class="add-customer" @click="
          toGo(
            '/packageQuick/pages/achievement-reports-form/index'
          )
          ">
          <div class="census row">
            <view class="census">
              <div class="offside"></div>
              <view class="census-name">本月业绩总额</view>
            </view>
            <img src="../../static/score/more.png" class="img-more" alt="" />
          </div>
          <div class="name">
            ¥ <text class="num font-weight">{{ performance }}</text>
          </div>
          <image class="add-customer-img" src="../../static/express-center/achievement.png">
          </image>
        </div>
        <div v-if="!isSupplier" class="single-quantity" @click="onGoSign">
          <div class="census row">
            <view class="census">
              <div class="offside pigment-blue"></div>
              <view class="census-name">本月目标</view>
            </view>
            <img src="../../static/score/more.png" class="img-more" alt="" />
          </div>
          <div class="name">
            <text class="num font-weight">{{
              signCount ? signCount : "0"
            }}</text>
          </div>
          <div class="text">长期在保新增</div>
          <div class="flex">
            <div style="width: 90%; margin-right: 14rpx">
              <progress activeColor="#3E5FF5" backgroundColor="#C3CDFB" :border-radius="10"
                :percent="signCount / finishsignCount" stroke-width="10" />
            </div>
            <span>{{
              (finishsignCount ? finishsignCount : 0) +
              "/" +
              (signCount ? signCount : 0)
            }}</span>
          </div>
          <!-- <image class="add-customer-img" src="../../static/express-center/written-permission.png"> -->
          <!-- </image> -->
        </div>
        <div v-if="isSupplier">
          <div class="single-quantity" @click="onSupplierGoSign">
            <div class="census row">
              <view class="census">
                <div class="offside pigment-blue"></div>
                <view class="census-name">本月签单总量</view>
              </view>
              <img src="../../static/score/more.png" class="img-more" alt="" />
            </div>
            <div class="name">
              <text class="num font-weight">{{
                supplierSignCount
              }}</text>
            </div>
            <image class="add-customer-img" src="../../static/express-center/written-permission.png">
            </image>
          </div>
        </div>
      </div>
      <div class="swiperbox">
        <swiper class="swiper" circular :indicator-dots="true" :autoplay="false" :interval="2000">
          <swiper-item>
            <view class="swiper-item">
              <div class="top">
                <div>业绩概览：子弹发薪</div>
                <div class="more" @click="toPay()">
                  <span>更多</span><img class="img" src="../../static/drop-down.png" alt="" />
                </div>
              </div>
              <div class="contentone">
                <div class="t">
                  <div class="contentitembox contentitemboxone mg-r-16">
                    <div class="contentitem_title">
                      销售总额
                    </div>
                    <div class="contentitem_num">
                      ￥{{ bullsaleTotalMoney }}
                    </div>
                  </div>
                  <div class="contentitembox contentitemboxtwo">
                    <div class="contentitem_title">
                      首签总额
                    </div>
                    <div class="contentitem_num">
                      ￥{{ bullfirstAmount }}
                    </div>
                  </div>
                </div>
                <div class="b">
                  <div class="contentitembox contentitemboxone mg-r-16">
                    <div class="contentitem_title">
                      续签总额
                    </div>
                    <div class="contentitem_num">
                      ￥{{ bullrenewalAmount }}
                    </div>
                  </div>
                  <div class="contentitembox contentitemboxtwo mg-r-16">
                    <div class="contentitem_title">
                      开户总额
                    </div>
                    <div class="contentitem_num">
                      ￥{{ bullopenAccountAmount }}
                    </div>
                  </div>
                  <div class="contentitembox contentitemboxthree">
                    <div class="contentitem_title">
                      销售笔数
                    </div>
                    <div class="contentitem_num">
                      {{ bullsalesNumber }}
                    </div>
                  </div>
                </div>
              </div>
            </view>
          </swiper-item>
          <swiper-item>
            <view class="swiper-item">
              <div class="top">
                <div>业绩概览：长期保</div>
                <div class="more" @click="toSecular()">
                  <span>更多</span><img class="img" src="../../static/drop-down.png" alt="" />
                </div>
              </div>
              <div class="contentone">
                <div class="b" style="margin-bottom: 14rpx">
                  <div class="contentitembox contentitemboxone mg-r-16">
                    <div class="contentitem_title">
                      总保费
                    </div>
                    <div class="contentitem_num">
                      ￥{{ longpremium }}
                    </div>
                  </div>
                  <div class="contentitembox contentitemboxtwo mg-r-16">
                    <div class="contentitem_title">
                      返利
                    </div>
                    <div class="contentitem_num">
                      ￥{{ longrebateAmountCount }}
                    </div>
                  </div>
                  <div class="contentitembox contentitemboxthree">
                    <div class="contentitem_title">
                      今日报案
                    </div>
                    <div class="contentitem_num">
                      {{ longtodayReport }}
                    </div>
                  </div>
                </div>
                <div class="b">
                  <div class="contentitembox contentitemboxthree mg-r-16">
                    <div class="contentitem_title">
                      业绩保费
                    </div>
                    <div class="contentitem_num">
                      ￥{{ longachievementAmount }}
                    </div>
                  </div>
                  <div class="contentitembox contentitemboxone mg-r-16">
                    <div class="contentitem_title">
                      今日在保总数
                    </div>
                    <div class="contentitem_num">
                      {{
                        longtodayInsure === null
                          ? 0
                          : longtodayInsure
                      }}
                    </div>
                    <div class="mt">
                      比上月{{
                        longtodayInsure -
                        longyesterdayInsure
                      }}
                    </div>
                  </div>
                  <div class="contentitembox contentitemboxtwo">
                    <div class="contentitem_title">
                      开通客户
                    </div>
                    <div class="contentitem_num">
                      {{ longthisMonthOpen }}
                    </div>
                    <div class="mt">
                      比上月{{
                        longthisMonthOpen -
                        longlastMonthOpen
                      }}
                    </div>
                  </div>
                </div>
              </div>
            </view>
          </swiper-item>
          <swiper-item>
            <view class="swiper-item">
              <div class="top">
                <div>业绩概览：日日保</div>
                <div class="more" @click="toDay()">
                  <span>更多</span><img class="img" src="../../static/drop-down.png" alt="" />
                </div>
              </div>
              <div class="contentone">
                <div class="t">
                  <div class="contentitembox contentitemboxtwo">
                    <div class="contentitem_title">
                      总保费
                    </div>
                    <div class="contentitem_num">
                      ￥{{ dayamount }}
                    </div>
                  </div>
                </div>
                <div class="b">
                  <div class="contentitembox contentitemboxone mg-r-16">
                    <div class="contentitem_title">
                      今日在保人数
                    </div>
                    <div class="contentitem_num">
                      {{ policyPeopleCount }}人
                    </div>
                    <!-- <div class="mt">比昨日{{  }}</div> -->
                  </div>
                  <div class="contentitembox contentitemboxthree">
                    <div class="contentitem_title">
                      报案数
                    </div>
                    <div class="contentitem_num">
                      {{ dayrecordCount }}
                    </div>
                  </div>
                </div>
              </div>
            </view>
          </swiper-item>
          <swiper-item>
            <view class="swiper-item">
              <div class="top">
                <div>业绩概览：团意日保</div>
                <div class="more" @click="toGcpa()">
                  <span>更多</span><img class="img" src="../../static/drop-down.png" alt="" />
                </div>
              </div>
              <div class="contentone">
                <div class="t">
                  <div class="contentitembox contentitemboxtwo">
                    <div class="contentitem_title">
                      总保费
                    </div>
                    <div class="contentitem_num">
                      ￥{{ tyrbamount }}
                    </div>
                  </div>
                </div>
                <div class="b">
                  <div class="contentitembox contentitemboxone mg-r-16">
                    <div class="contentitem_title">
                      今日在保人数
                    </div>
                    <div class="contentitem_num">
                      {{ policyPeopleCounttyrb }}人
                    </div>
                  </div>
                  <div class="contentitembox contentitemboxthree">
                    <div class="contentitem_title">
                      报案数
                    </div>
                    <div class="contentitem_num">
                      {{ tyrbrecordCount }}
                    </div>
                  </div>
                </div>
              </div>
            </view>
          </swiper-item>
          <swiper-item>
            <view class="swiper-item">
              <div class="top">
                <div>业绩概览：电子签</div>
                <div class="more" @click="toEle()">
                  <span>更多</span><img class="img" src="../../static/drop-down.png" alt="" />
                </div>
              </div>
              <div class="contentone">
                <div class="t">
                  <div class="contentitembox contentitemboxtwo">
                    <div class="contentitem_title">
                      充值金额
                    </div>
                    <div class="contentitem_num">
                      ￥{{ eleeleRechargeCount }}
                    </div>
                  </div>
                </div>
                <div class="b">
                  <div class="contentitembox contentitemboxone mg-r-16">
                    <div class="contentitem_title">
                      充值份数
                    </div>
                    <div class="contentitem_num">
                      ￥{{ elerechargeCopies }}
                    </div>
                  </div>
                  <div class="contentitembox contentitemboxthree">
                    <div class="contentitem_title">
                      开通客户
                    </div>
                    <div class="contentitem_num">
                      {{ elecustomer }}
                    </div>
                  </div>
                </div>
              </div>
            </view>
          </swiper-item>
        </swiper>
      </div>
    </view>
    <popup v-if="!issm">
      <div class="topimg">
        <img class="img"
          src="https://bullet001.oss-cn-shanghai.aliyuncs.com/file/crm/d4494f4f-9e98-459b-a631-9eae7ee12b4b.png"
          alt="" />
      </div>
      <div class="tccontentbocx">
        <div class="text">
          为满足相关法律法规政策及相关主管部门的要求，我们需要收集您的姓名、身份证件号码，以证实您的个人身份。
        </div>
        <div class="btnbox">
          <div class="btn" @click="tosm">立即去实名</div>
        </div>
      </div>
    </popup>
    <customTabBar v-if="issm" url="/pages/express-center/index" />
  </div>
</template>

<script setup lang="ts">
import { onLoad, onShow } from '@dcloudio/uni-app'
import { ref, computed, watch, onMounted } from 'vue'
import user from '@/utils/user'
import popup from '@/components/popup/popup.vue'
import dayjs from 'dayjs'
import { getuserinfo, getSaleTaskapi } from '../../api/personalmsgapi'
import {
    fastStatistics,
    getsigncontractrecordinfoapi,
    getperioddataapi,
    getwesuredataapi,
    getwesuredatatyrbapi,
    getelesalesdataapi
} from '@/api/fast'
import customTabBar from '@/components/tabbar/index.vue'
import store from '@/store/index.js'
const issm = ref(true)

const isSupplier = computed(() => {
    return store.state.isSupplier
})

const toDay = () => {
    uni.navigateTo({
        url: '/packageQuick/pages/day-to-day/index'
    })
}
const tosm = () => {
    uni.navigateTo({
        url:
      '/pages/realNameAuthentication/realNameAuthentication?hassm=' + '0'
    })
}
const toSecular = () => {
    uni.navigateTo({
        url: '/packageQuick/pages/long-term-protection/index'
    })
}

const toEle = () => {
    uni.navigateTo({
        url: '/packageQuick/pages/electronic-sign/index'
    })
}
const toGcpa = () => {
    uni.navigateTo({
        url: '/packageQuick/pages/gcpa/index'
    })
}
const toPay = () => {
    uni.navigateTo({
        url: '/packageQuick/pages/score/index'
    })
}
const getsigncontractrecordinfo = () => {
    getsigncontractrecordinfoapi({
        startTime: startTime.value,
        endTime: endTime.value
    }).then((res: any) => {
        console.log(res, '子弹发薪')
        bullfirstAmount.value = res.firstAmount
        bullopenAccountAmount.value = res.openAccountAmount
        bullrenewalAmount.value = res.renewalAmount
        bullsaleTotalMoney.value = res.saleTotalMoney
        bullsalesNumber.value = res.salesNumber
    })
}
const bullfirstAmount = ref(0)
const bullopenAccountAmount = ref(0)
const bullrenewalAmount = ref(0)
const bullsaleTotalMoney = ref(0)
const bullsalesNumber = ref(0)
const getperioddata = () => {
    getperioddataapi({
        startTime: startTime.value,
        endTime: endTime.value
    }).then((res: any) => {
        console.log(res, '长期保')
        longpremium.value = res.premium
        longrebateAmountCount.value = res.rebateAmountCount
        longachievementAmount.value = res.achievementAmount
        longtodayInsure.value = res.todayInsure
        longyesterdayInsure.value = res.yesterdayInsure
        longthisMonthOpen.value = res.thisMonthOpen
        longlastMonthOpen.value = res.lastMonthOpen
        longtodayReport.value = res.todayReport
    })
}
const longpremium = ref(0)
const longrebateAmountCount = ref(0)
const longachievementAmount = ref(0)
const longtodayInsure = ref(0)
const longyesterdayInsure = ref(0)
const longthisMonthOpen = ref(0)
const longlastMonthOpen = ref(0)
const longtodayReport = ref(0)
const getwesuredata = () => {
    getwesuredataapi({
        startTime: startTime.value,
        endTime: endTime.value
    }).then((res: any) => {
        console.log(res, '日日保')
        dayamount.value = res.amount
        policyPeopleCount.value = res.insureCount
        dayrecordCount.value = res.recordCount
    })
}
const dayamount = ref(0)
const policyPeopleCount = ref(0)
const dayrecordCount = ref(0)
const getwesuredatatyrb = () => {
    getwesuredatatyrbapi({
        startTime: startTime.value,
        endTime: endTime.value,
        insureCompanyType: 'insure_type_tyrb'
    }).then((res: any) => {
        console.log(res, '团意日保')
        tyrbamount.value = res.amount
        policyPeopleCounttyrb.value = res.insureCount
        tyrbrecordCount.value = res.recordCount
    })
}
const tyrbamount = ref(0)
const policyPeopleCounttyrb = ref(0)
const tyrbrecordCount = ref(0)
const getelesalesdata = () => {
    getelesalesdataapi({
        startTime: startTime.value,
        endTime: endTime.value
    }).then((res: any) => {
        console.log(res, '电子签')
        elecustomer.value = res.customer
        eleeleRechargeCount.value = res.eleRechargeCount
        elerechargeCopies.value = res.rechargeCopies
    })
}
const elecustomer = ref(0)
const eleeleRechargeCount = ref(0)
const elerechargeCopies = ref(0)
const startTime = ref('')
const endTime = ref('')
const envelopelist = ref([
    // {
    //     src: '../../static/express-center/khc.png',
    //     caption: '我的客户',
    //     href: '/pages/signing/index',
    //     position: 'left'
    // },
    {
        src: '../../static/express-center/yxkh.png',
        caption: '意向客户',
        href: '/pages/customer-contacts/customer-contacts?label=' + 100,
        position: 'left'
    },
    // {
    //     src: '../../static/express-center/phb.png',
    //     caption: '销售榜',
    //     href: '/packageRankinglist/pages/index/index',
    //     position: 'left'
    // },
    {
        src: '../../static/express-center/customer-pool.png',
        caption: '客户池 ',
        href: '/packageQuick/pages/customer-pool/index',
        position: 'right'
    },
    {
        src: '../../static/express-center/propagate-generalize.png',
        caption: '宣传推广',
        href: '/pages/extension-canvas/extension-canvas',
        position: 'right'
    },
    {
        src: '../../static/express-center/zbzm.png',
        caption: '在保证明',
        href: '/packageInsureProve/pages/index/index',
        // href: '/packageQuick/pages/my-client/index',
        position: 'left'
    },
    {
        src: '../../static/express-center/customer.png',
        caption: '我的客户',
        href: '/pages/signing/index',
        // href: '/packageQuick/pages/my-client/index',
        position: 'left'
    }
] as { src: string; href: string; caption: string; position: string }[])
const envelope1 = ref([
    {
        src: '../../static/express-center/call-contact.png',
        caption: '电联客户',
        href: '/pages/customer-contacts/customer-contacts?label=' + 100,
        position: 'left'
    },
    {
        src: '../../static/express-center/my-customers.png',
        caption: '我的客户',
        // href: '/packageQuick/pages/my-client/index',
        position: 'center'
    },
    {
        src: '../../static/express-center/customer-pool.png',
        caption: '客户池 ',
        href: '/packageQuick/pages/customer-pool/index',
        position: 'right'
    }
] as { src: string; href: string; caption: string; position: string }[])
const envelope2 = ref([
    {
        src: '../../static/express-center/journaling.png',
        caption: '业绩报表',
        href: '/packageQuick/pages/achievement-reports-form/index',
        position: 'left'
    },
    {
        src: '../../static/express-center/propagate-generalize.png',
        caption: '宣传推广',
        href: '/pages/extension-canvas/extension-canvas',
        position: 'right'
    },
    {
        src: '../../static/express-center/rest-statistics-record.png',
        caption: '其他统计',
        href: '/packageQuick/pages/record-count/index',
        position: 'center'
    }
] as { src: string; href: string; caption: string; position: string }[])
const envelope3 = ref([
    {
        src: '../../static/express-center/client-relation.png',
        caption: '新建联系',
        href: '/pages/new-contacts/new-contacts',
        position: 'left'
    },
    {
        src: '../../static/express-center/client-relation.png',
        caption: '在保证明',
        href: '/packageInsureProve/pages/index/index',
        position: 'left'
    },
    {
        src: '../../static/express-center/client-relation.png',
        caption: '销售榜',
        href: '/packageRankinglist/pages/index/index',
        position: 'left'
    }
] as { src: string; href: string; caption: string; position: string }[])

const performance = ref(0)
const signCount = ref(0)
const supplierSignCount = ref(0)
const finishsignCount = ref(0)
const userName = ref('')
const userImg = ref('')
const userPhone = ref('')
const userid = ref<any>(null)
onMounted(async () => {
    await user.waitLogin()
    startTime.value = dayjs().startOf('month').format('YYYY-MM-DD')
    endTime.value = dayjs().endOf('month').format('YYYY-MM-DD')
    getuserinfo().then((res: any) => {
        userName.value = res.salesName
        userImg.value = res.salesHeadUrl
        userPhone.value = res.phone
        issm.value = !!res.idCardNo
        uni.hideTabBar()
        userid.value = res.id
    })
    getSaleTaskapi({ queryMonth: dayjs().format('YYYY-MM') }).then(
        (res: any) => {
            console.log(res, 'resresreafuhgihsuighy')
            signCount.value = res.salesTaskValue
            finishsignCount.value = res.completionValue
        }
    )
    getFastStatistics()
    getelesalesdata()
    getwesuredatatyrb()
    getwesuredata()
    getperioddata()
    getsigncontractrecordinfo()
    wx.showShareMenu({
        withShareTicket: true,
        /* //设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击 */
        menus: ['onShareAppMessage', 'onShareTimeline']
    })
})
const topersonalinfo = () => {
    uni.navigateTo({
        url: '/pages/messageinfo/messageinfo'
    })
}
const tomessage = () => {
    uni.navigateTo({
        url: '/pages/messagelist/messagelist'
    })
}
const getFastStatistics = async () => {
    const result = await fastStatistics()
    performance.value = result.performance
    supplierSignCount.value = result.signCount
    console.log(result, 'result')
}
const toGo = (e: string) => {
    console.log(e, 'eeeeee')
    if (!e) {
        return
    }
    uni.navigateTo({
        url: e
    })
}
const onGoSign = () => {
    // uni.switchTab({
    //     url: '/pages/signing/index'
    // })
    uni.navigateTo({
        url: '/packageTeam/pages/teamTarget/index'
    })
}
const onSupplierGoSign = () => {
    uni.switchTab({
        url: '/pages/signing/index'
    })
}
</script>

<style lang="scss" scoped>
.container {
  background: #fafafc;
  padding-bottom: 0;

  &.set-height {
    min-height: calc(100vh - constant(safe-area-inset-bottom) - 100rpx);
    min-height: calc(100vh - env(safe-area-inset-bottom) - 100rpx);
    padding-bottom: calc(constant(safe-area-inset-bottom) + 100rpx);
    padding-bottom: calc(env(safe-area-inset-bottom) + 100rpx);
  }
}

.container-box {
  padding: 30rpx;
  box-sizing: border-box;
}

.header-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 145rpx;
}

.album {
  width: 94rpx;
  height: 94rpx;
  margin-right: 22rpx;
  border-radius: 50%;
}

.individual-info {
  display: flex;
  align-items: center;
  line-height: 45rpx;
}

.monicker {
  font-size: 32rpx;
  font-weight: bold;
  color: $black2;
  line-height: 28px;
  display: flex;
  align-items: center;

  .yrzbox {
    background-color: #f4f4f4;
    border-radius: 20rpx;
    width: 143rpx;
    height: 36rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18rpx;
    color: #646a73;

    .img {
      margin-top: 5rpx;
      margin-right: 5rpx;
      width: 20rpx;
      height: 20rpx;
    }
  }
}

.handset {
  font-size: $font-base;
  color: $grey2;
}

.telephone-img {
  width: 30rpx;
  height: 30rpx;
  padding-right: 12rpx;
}

.borderism {
  width: 94rpx;
  height: 94rpx;
}

.middle-section {
  display: flex;
  align-items: center;

  .add-customer {
    position: relative;
    @include padding(23rpx 30rpx);
    margin-top: 60rpx;
    width: 330rpx;
    height: 240rpx;
  }

  .single-quantity {
    position: relative;
    @include padding(23rpx 30rpx);
    margin-top: 60rpx;
    width: 330rpx;
    height: 240rpx;
    background-color: #ebeffe;
    border-radius: 16rpx;
    margin-left: 30rpx;

    .text {
      margin-top: 13rpx;
      margin-bottom: 25rpx;
    }
  }

  .add-customer-img {
    width: 330rpx;
    height: 240rpx;
    position: absolute;
    top: 0;
    left: 0;
  }

  .offside {
    width: 7rpx;
    height: 17rpx;
    background: #ff7642;
    border-radius: 4rpx 4rpx 4rpx 4rpx;
    opacity: 1;
    margin-right: 10rpx;
  }

  .pigment-blue {
    background: $blue;
  }

  .census {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1;
    font-size: $font-small;
    font-weight: normal;
    color: $black2;

    .census-name {
      color: #202428;
      font-size: 20rpx;
      font-weight: normal;
    }
  }

  .name {
    position: relative;
    z-index: 1;
    font-size: $font-base;
    font-weight: 800;
    color: $black2;
    padding-top: 20rpx;
  }

  .num {
    font-size: 36rpx;
  }
}

.celerity-kernel {
  margin-top: 60rpx;

  .celerity-headline {
    font-size: $font-normal;
    font-weight: bold;
    color: $black;
  }

  .celerity-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0rpx 20rpx;
  }

  .celerity-label {
    text-align: center;

    .left {
      text-align: left;
    }

    .right {
      text-align: right;
    }
  }

  .celerity-label-box {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .celerity-label-img {
    width: 64rpx;
    height: 64rpx;
    margin: 60rpx 0 15rpx 0;
  }
}

.celerity-row-new {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.img-more {
  width: 25rpx;
  height: 25rpx;
}

.celerity-remarks {
  width: 100rpx;
  text-align: center;
}

.mg-r-16 {
  margin-right: 16rpx;
}

.swiperbox {
  margin-top: 30rpx;
  width: 100%;
  box-sizing: border-box;
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx 0 0;
  height: 430rpx;

  .swiper {
    width: 100%;
    height: 100%;
    box-sizing: border-box;

    .top {
      font-size: 28rpx;
      color: #202536;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 25rpx;

      .more {
        display: flex;
        align-items: center;
        color: #565868;
      }

      .img {
        transform: rotate(-90deg);
        width: 20rpx;
        height: 15rpx;
      }
    }
  }
}

.contentitem_title {
  color: #565868;
  font-size: 20rpx;
  margin-bottom: 12rpx;
}

.contentitem_num {
  font-size: 36rpx;
  color: #202536;
  font-weight: 900;
}

.contentitembox {
  background-color: #f4f4f7;
  border-radius: 16rpx;
  padding: 24rpx 14rpx;
  box-sizing: border-box;
  height: 140rpx;
  flex: 1;
}

.contentone {
  .t {
    display: flex;
    margin-bottom: 14rpx;

    .contentitemboxone {
      flex: 2;
      // margin-right: 16rpx;
    }

    .contentitemboxtwo {
      flex: 1;
    }
  }

  .b {
    display: flex;

    .contentitemboxone {
      flex: 1;
      // margin-right: 16rpx;
    }

    .contentitemboxtwo {
      // margin-right: 16rpx;
      flex: 1;
    }

    .contentitemboxthree {
      flex: 1;
    }
  }
}

.mt {
  font-size: 18rpx;
  color: #3d3d3d;
}

.swiper-item {
  padding: 0 30rpx;
  box-sizing: border-box;
}

.progress-box {
  display: flex;
  height: 50rpx;
  margin-bottom: 60rpx;
}

.uni-icon {
  line-height: 1.5;
}

.progress-cancel {
  margin-left: 40rpx;
}

.progress-control button {
  margin-top: 20rpx;
}

.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tccontentbocx {
  padding: 0 36rpx;

  .text {
    color: #171a1d;
    font-size: 28rpx;
  }

  .btnbox {
    margin-top: 50rpx;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;

    .btn {
      width: 100%;
      height: 88rpx;
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32rpx;
      background-color: #3e5ff5;
      border-radius: 60rpx;
    }
  }
}

.topimg {
  width: 100%;
  margin-bottom: 77rpx;

  .img {
    width: 100%;
    height: 364rpx;
  }
}
</style>
